<template>
  <div class="main">
    <nav-bar />
    <div class="info pt-22">
      <div class="title mb-4">TA的性别</div>
      <div class="sex_box flex_r">
        <div class="sex_item flex_a_c flex1" @click="sex = 2">
          <img class="sex_icon" v-if="sex === 1" src="http://content.daylucky.cn/admin/image/imu74smourig4wk30ps8goxv.png" alt="">
          <img class="sex_icon" v-if="sex === 2" src="http://content.daylucky.cn/admin/image/e8ofixcmibr6clncof1rubh9.png" alt="">
          <div>男</div>
        </div>
        <div class="sex_item flex_a_c flex1" @click="sex = 1">
          <img class="sex_icon" v-if="sex === 2" src="http://content.daylucky.cn/admin/image/imu74smourig4wk30ps8goxv.png" alt="">
          <img class="sex_icon" v-if="sex === 1" src="http://content.daylucky.cn/admin/image/e8ofixcmibr6clncof1rubh9.png" alt="">
          <div>女</div>
        </div>
      </div>
    </div>
    <div class="txt">如果用一种动物描述对方<br>你会认为ta是地球上的什么动物</div>
    <div class="mt-32 flex_center flex_wrap pb-25">
      <div class="animal_list flex_center flex_c" @click="cur = index" v-for="(item, index) in animalList" :key="index">
        <img :src="cur === index ? item.url : item.normal" class="animal_img" />
        <div>{{ item.title }}</div>
      </div>
    </div>
    <div class="btn" @click="onNext">询问我和TA</div>
  </div>
</template>
<script>
import { showToast } from 'vant'
export default {
  data() {
    return {
      sex: 1,
      cur: '',
      animalList: [
        {
          normal: 'http://content.daylucky.cn/admin/image/z2sp3r1gowq8ir71nl31g9hm.png',
          url: 'http://content.daylucky.cn/admin/image/4vr5dl3dqbfhbvrpkbl9jic6.png',
          title: '熊猫'
        },
        {
          normal: 'http://content.daylucky.cn/admin/image/6ytn2d6zaf94mmf9j5cj6bvf.png',
          url: 'http://content.daylucky.cn/admin/image/iubye8lqvb0ej7dbwuuhz1uy.png',
          title: '狗'
        },
        {
          normal: 'http://content.daylucky.cn/admin/image/mz7xdg8x4iloj0322h4t55d0.png',
          url: 'http://content.daylucky.cn/admin/image/9uln1e5dm8mgtubl0x05w009.png',
          title: '狐狸'
        },
        {
          normal: 'http://content.daylucky.cn/admin/image/x2t0fnuduyc99ao8posgra5y.png',
          url: 'http://content.daylucky.cn/admin/image/wv4txm18vtd0neptia0xzi1t.png',
          title: '猫'
        },
        {
          normal: 'http://content.daylucky.cn/admin/image/w4r7xnqgkqo3kffu05zawkpa.png',
          url: 'http://content.daylucky.cn/admin/image/vmlzlynwydwgqkynm5rz4ogo.png',
          title: '蛇'
        },
        {
          normal: 'http://content.daylucky.cn/admin/image/gr8pvv4gmpvhyoh7a6hkw7ay.png',
          url:  'http://content.daylucky.cn/admin/image/y4lwhxrazy1htbrflx45923d.png',
          title: '牛'
        },
        {
          normal: 'http://content.daylucky.cn/admin/image/1u40d7kk74ozpx3qt2kvz72k.png',
          url: 'http://content.daylucky.cn/admin/image/34j145gqoy7ehtlivfrpwbdb.png',
          title: '鹿'
        },
        {
          normal: 'http://content.daylucky.cn/admin/image/8fmgwztzdkd064xncj53qyn3.png',
          url: 'http://content.daylucky.cn/admin/image/76c42b3opisyg2syz8p7qz5c.png',
          title: '虎'
        },
        {
          normal: 'http://content.daylucky.cn/admin/image/o4d7t7rkrxw0rmyuup3i17wi.png',
          url:'http://content.daylucky.cn/admin/image/78cur48tlunauchd77nrr86i.png',
          title: '猪'
        },
      ]
    }
  },
  methods: {
    onNext() {
      if (this.cur === '') {
        showToast('请选择一个描述动物吧')
        return false
      }
      this.$router.replace({ path: '/mirror/canvas', query: { owned: false }})

      // uni.navigateTo({
      //   url: '/pages/canvas/index?owned=false'
      // })
    }
  }

}
</script>
<style lang="scss" scoped>
.main {
  padding-bottom: 65px;
  background: #FFFFFF;
}
.sex_box {
  height: 38px;
  position: relative;
  padding-left: 1px;
  padding-right: 13px;
  &:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 311px;
    height: 2px;
    background: #000000;
    border-radius: 11px 11px 11px 11px;
  }
  .sex_item {
    font-size: 16px;
    line-height: 386px;
    .sex_icon {
      display: block;
      width: 18px;
      height: 18px;
      margin-right: 4px;
    }
  }
}
.info {
  width: 311px;
  margin: 0 auto;
  
}
.title {
  // font-weight: 600;
  font-size: 20px;
  color: #000000;
  line-height: 24px;
}
.txt {
  // font-weight: normal;
  font-size: 16px;
  color: #000000;
  text-align: center;
  font-style: normal;
 	font-family: pf_bold;
  margin-top: 42px;
  line-height: 29px;

}
.animal_list {
  width: 104px;
  // font-weight: 400;
  font-size: 14px;
  color: #000000;
  line-height: 20px;
  margin-bottom: 20px;
  text-align: center;
  font-style: normal;
  text-transform: none;
  .animal_img {
    width: 62px;
    height: 62px;
    display: block;
    margin-bottom: 8px;
  }
}

.btn {
  width: 310px;
  height: 48px;
  border-radius: 42px 42px 42px 42px;
  text-align: center;
  margin: 0 auto;
  background: #000000;
  font-size: 16px;
  color: #FFFFFF;
  line-height: 48px;
  font-style: normal;
}
</style>